<template>
  <div>
    <el-table
    :data="showList"
    style="width: 100%">
      <el-table-column
      type="expand">
        <template slot-scope>
           <!-- <el-form label-position="left" inline class="demo-table-expand">
             <el-form-item label="商品名称">
               <span>{{ props.row.name }}</span>
             </el-form-item>
           </el-form> -->
           <div :style="{width:'100%',height:'100px',background:'red'}"></div>
        </template>
      </el-table-column>
      <el-table-column
      label="店铺名称"
      prop="name">
      </el-table-column>
      <el-table-column
      label="店铺地址"
      prop="address">
      </el-table-column>
      <el-table-column
      label="店铺介绍"
      prop="promotion_info">
      </el-table-column>
      <el-table-column
      label="操作">
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
      background
      layout="prev, pager, next"
      :total="list.length"
      :page-size="pageSize"
      @next-click="onClickNextPage"
      @prev-click="onClickPrevPage"
      @current-change="onCurrentPageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      list:[],
      showList:[],
      startIndex:0,
      endIndex:6,
      pageSize:6
    }
  },
  mounted(){
   axios.get("http://localhost:8080/shopList.json").then((res)=>{
      // console.log(res)
      this.list = res.data;
      console.log(this.list)
      for(let index=this.startIndex;index<this.endIndex;index++){
        this.showList.push(this.list[index])
      }
   })
  },
  methods:{
    onClickNextPage(page){
      console.log(page);//
      // 0   ---  5 1
      // 5   --- 10 2
      // 10 ----15  3
      // 15----20   4   
      this.startIndex = (page-1)*this.pageSize;
      this.endIndex = page*this.pageSize;
      if(this.endIndex>this.list.length){
        this.endIndex = this.list.length
      }
      this.showList = [];
      for(let index=this.startIndex;index<this.endIndex;index++){
        this.showList.push(this.list[index])
      }
    },
    onClickPrevPage(page){
      console.log(page);
      this.startIndex = (page-1)*this.pageSize;
      this.endIndex = page*this.pageSize;
      if(this.endIndex>this.list.length){
        this.endIndex = this.list.length
      }
      this.showList = [];
      for(let index=this.startIndex;index<this.endIndex;index++){
        this.showList.push(this.list[index])
      }
    },
    onCurrentPageChange(page){
      console.log(page)
      this.startIndex = (page-1)*this.pageSize;
      this.endIndex = page*this.pageSize;
      if(this.endIndex>this.list.length){
        this.endIndex = this.list.length
      }
      this.showList = [];
      for(let index=this.startIndex;index<this.endIndex;index++){
        this.showList.push(this.list[index])
      }
    }
  }
}
</script>